<template id='zyInput'>
  <div class="zyInput">
    <p class="title" v-if="zyModel.title">{{ zyModel.title }}</p>
    <form class="content" @submit="check(zyModel.name)">
      <input spellcheck="false" :class="{ isErr: !flag }" :type="zyModel.type ? zyModel.type : 'text'"
        :placeholder="zyModel.placeholder" @blur="check(zyModel.name)" v-model="zyModel.value" autocomplete="off"
        @keyup.enter="prevent($event)" />
      <transition-group :name="transitionName">
        <p class="tip" v-show="!flag" key="1">{{ zyModel.tip }}</p>
        <p class="tip" v-show="!asyncFlag" key="2">{{ zyModel.asyncTip }}</p>
      </transition-group>
    </form>


  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { isEmail, notEmpty } from "@/utils/validate.js"
export default {
  name: 'zyInput',
  components: {
  },
  props: {
    zyModel: {
      type: Object
    }
  },
  // 定义属性
  data() {
    return {
      asyncFlag: true, //动态校验
      flag: true, //静态校验
      transitionName: ""
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {
    flag(newV, oldV) {
      if (newV) {
        this.transitionName = 'tipEnter'
      } else {
        this.transitionName = 'tipLeave'
      }
    },
    asyncFlag(newV, oldV) {
      if (newV) {
        this.transitionName = 'tipEnter'
      } else {
        this.transitionName = 'tipLeave'
      }
    },
  },
  // 方法集合
  methods: {
    showFlag() {
      this.asyncFlag = false
    },
    check(value) {
      this.asyncFlag = true
      let _this = this
      let newMap = new Map([['email', isEmail(_this.zyModel.value)], ['password', notEmpty(_this.zyModel.value)], ['uncheck', true]])
      _this.flag = newMap.get(value)
      return _this.flag
    },
    reset() {
      this.flag = true
      this.asyncFlag = true
    },
    prevent(e) {
      e.preventDefault()
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
.zyInput {


  .title {
    font-size: 14px;
    font-family: @tFamily;
    color: @tColor;
  }

  .content {
    position: relative;

    input {
      margin-top: 10px;
      width: 390px;
      height: 40px;
      border-radius: 4px;
      border: solid 1px #dddddd;
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      box-sizing: border-box;
      color: #a8a8a8;
      display: inline-block;
      font-size: 14px;
      line-height: 40px;
      outline: none;
      padding: 0 12px;
      transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    }

    input:hover {
      cursor: grab;
    }

    input:focus {
      border-color: @tColor ;
      outline: 0;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(112, 209, 130, .6);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(112, 209, 130, .6);
    }

    .isErr {
      border-color: @eColor ;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(255, 101, 101, .6);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(255, 101, 101, .6);
    }

    .tip {
      position: absolute;
      bottom: -20px;
      color: @eColor;
      font-size: 12px;
      text-align: left;
    }

    .tipEnter-enter-active,
    .tipEnter-leave-active,
    .tipLeave-enter-active,
    .tipLeave-leave-active {
      will-change: transform;
      transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)
    }

    .tipLeave-enter {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }

    .tipLeave-leave-active {
      opacity: 1;
      transform: translate3d(0, 100%, 0);
    }

    .tipEnter-enter {
      opacity: 1;
      transform: translate3d(0, 100%, 0);
    }

    .tipEnter-leave-active {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }
  }

}

//手机样式
@media screen and (max-width: 650px) {
  .zyInput {
    .content {
      input {
        width: 100%;
      }

      .tip {
        top: 56px;
        bottom: unset;
      }
    }

  }
}
</style>